<template>
  <!-- 模拟器 -->
  <div class="vue-simulator" ref="simulatorPage">
    <div style="height: 100%;" class="seeCan" ref="pageBox">
      <!-- banner -->
      <div class="banner computedHeight">
        <!--  http://qpic.y.qq.com/music_cover/mlUG84rgKKtFPWMCEuzxuyXLOUEOwk3VxT9WFAuNRUoF8PRAicWu77g/300?n=1  baseInfoData[1].val-->
        <el-image
          class="banner-img"
          :src="baseInfoData[1].val"
          fit="cover"
          @mousedown="mousedown"
        ></el-image>
        <div class="tag" v-show="baseInfoData[0].val?true:false">
          <!-- <span class="tag-item" v-for="(tag, index) in baseInfoData[5].val" :key="index">{{tag}}</span> -->
          <span class="tag-tit">{{baseInfoData[0].val}}</span>
        </div>
      </div>
      <!-- 作者 -->
      <div class="tit computedHeight">
        <!-- <span class="tit-text" v-text="baseInfoData[0].val?baseInfoData[0].val:'待输入...'"></span> -->
        <div class="tit-author">
          <el-image
            class="avatar"
            src="http://qpic.y.qq.com/music_cover/YqQNFQNJiaSkibexzichdYOoBUjKib0PBkMZcTKJy7zO0Pp0kPMtl0HIpQ/300?n=1"
            @mousedown="mousedown"
            fit='cover'
          ></el-image>
          <div class="author-info">
            <div class="author-name">IKON</div>
            <!-- 2019/09/05 -->
            <div class="author-time" v-text="getYearM()"></div>
          </div>
        </div>
        <div class="tit-ic-group">
          <!-- http://y.gtimg.cn/mediastyle/yqq/img/logo@2x.png?nowebp=1 2x -->
          <el-image src="/static/img/ic-group.png"></el-image>
        </div>
      </div>
      <!-- 特色 -->
      <!-- <div class="feature computedHeight">
        <span class="feature-tit">线路特色</span>
        <ul class="feature-ul" v-show="baseInfoData[4].val.length>0?true:false">
          <li
            class="feature-item"
            v-for="(feature, index) in baseInfoData[4].val"
            :key="index"
          >{{feature}}</li>
        </ul>
        <div v-show="!baseInfoData[4].val.length>0?true:false" style="font-size: 16px;">待输入...</div>
      </div> -->
      <!-- 简介 -->
      <div
        class="summary computedHeight"
        v-show="baseInfoData[2].val?true:false"
        v-html="replaceN(baseInfoData[2].val)"
      ></div>
      <!-- 单独简介 -->
      <!-- <div class="unit-summary" v-show="day.length>0?false:true" v-text="baseInfoData[2].val?baseInfoData[2].val:'待输入...'"></div> -->

      <!-- day -->
      <div class="day-box computedHeight" v-show="point.length>0?true:false">
        <!-- day content -->
        <div class="day-content" v-show="point.length>0?true:false">
          <div class="day-content-scrollY">
            <div
              class="day-every-box"
            >
              <unit :unit="point" ref="unit" @img-load="imgLoad" name="strategy"></unit>
              <!-- <div class="u-summary" v-text="pointItem.summary?dayItem.summary:'待输入'">{{dayItem.summary}}</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
module.exports = {
  data() {
    return {
      // tit的上下margin
      titMargin: 40,
      // 特点的下margin
      featrueMargin: 20,
      // day margin-bottom
      dayMarginBottom: 20
    };
  },
  props: {
    point: {
      type: Array,
      default: () => {
        return [];
      }
    },
    baseInfoData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    baseInfoData: {
      handler(now, old) {
        this.initPageScroll();
      },
      deep: true
    },
    point: {
      handler(now, old) {
        console.log('gx')
        this.initPageScroll();
      },
      deep: true
    }
  },
  created() {
    this.$nextTick(() => {
      this.initPageScroll();
      // this.initTitTabScroll();
    });
  },
  components: {
    unit: httpVueLoader("./unit.vue")
  },
  methods: {
    getYearM(){
      var a = new Date()
      var y = a.getFullYear()
      var m = (a.getMonth() + 1).toString()
      var d = (a.getDate()).toString()
      return y+'/'+(m.length==1?`0${m}`:m)+'/'+(d.length==1?`0${d}`:d)
    },
    replaceN(str) {
      if (str) {
        return str.replace(/\n/g, "<br>");
      }
    },
    mousedown(e) {
      e.preventDefault();
    },
    imgLoad() {
      this.initPageScroll();
    },
    initTitTabScroll() {
      // 这里计算滑动div的width
      let width = this.point.length * (60 + 15);
      this.$refs.titTabScroll.style.width = width + "px";
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.titTab, {
            startX: 0,
            click: true,
            scrollY: false,
            scrollX: true,
            eventPassthrough: "vertical"
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    getPageHeight() {
      let pageItems = this.$refs.simulatorPage.getElementsByClassName(
        "computedHeight"
      );
      let height = 0;
      for (var i = 0; i < pageItems.length; i++) {
        height += pageItems[i].clientHeight;
      }
      return height;
    },
    initPageScroll() {
      const { titMargin, featrueMargin, dayMarginBottom } = this;
    
      this.$nextTick(() => {
        this.$refs.pageBox.style.height =
        this.getPageHeight() +
        titMargin +
        featrueMargin +
        dayMarginBottom +
        "px";
        this.simulatorPages = new BScroll(this.$refs.simulatorPage, {
          startX: 0,
          click: true,
          scrollY: true,
          scrollX: false,
          eventPassthrough: "horizontal",
          deceleration: 0.001
        });
      });
    }
  }
};
</script>
<style scoped>
@import "./simulator.css";
.tag {
  background: transparent;
  padding: 0;
}
.tit-author{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 8;
}
.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
.author-name{
  font-size: 14px;
  font-weight: bold;
  color: #353535;
}
.author-time{
  font-size: 12px;
  color: #8a8a8a;
}
.summary{
  width: 95%;
  margin: 0 auto;
  font-size: 14px;
  color: #353535;
  word-break: break-all;
  text-align: justify;
}
</style>